<template>
    <div class="con">
        <div class="login">
            <h4>后台管理登陆系统</h4>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item prop="userName">
                    <el-input style="width:80%" placeholder="用户名" type="text" v-model="ruleForm.userName" autocomplete="off"
                        size="small"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input style="width:80%" placeholder="密码" type="password" v-model="ruleForm.password"
                        autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item value="验证码" prop="captcha">
                    <el-input placeholder="验证码" v-model="ruleForm.captcha" size="small" style="width: 35%;"></el-input>
                    <span v-html="captcha" style="width: 30%;margin-left: 5px;" @click="getCaptcha()"></span>
                </el-form-item>
                <el-form-item>
                    <el-button style="width: 80%;" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button style="width: 80%;margin-top: 10px;margin-left: 0;"
                        @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>

export default {
    data() {
        var checkCaptcha = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('验证码不能为空'));
            }
            callback()
        };
        var validateUserName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('用户名不能为空'));
            } else {
                callback()
            }
        };
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('密码不能为空'));
            } else {
                callback();
            }
        };
        return {
            captcha: '',
            ruleForm: {
                userName: '',
                password: '',
                captcha: ''
            },
            rules: {
                userName: [
                    { validator: validateUserName, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                captcha: [
                    { validator: checkCaptcha, trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        // 提交登录框
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    await this.$http.post('/login', {
                        userName: this.ruleForm.userName,
                        pwd: this.ruleForm.password,
                        captcha: this.ruleForm.captcha
                    }).then(res => {
                        if (res.msg == 'success') {
                            console.log(res.data)
                            window.localStorage.setItem("data", JSON.stringify(res.data))
                            window.localStorage.setItem("token", res.token)
                            window.localStorage.setItem("tokenStartTime", new Date().getTime())
                            this.$message.success("登陆成功")
                            this.$router.push('/user')
                        }
                        else if (res.msg == 'uperr') {
                            this.$message.error('用户名或密码错误，请重新输入')
                        }
                        else {
                            this.$message.error('验证码错误，请重新输入');
                        }
                        this.getCaptcha();
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 重置登录框
        async resetForm(formName) {
            await this.$refs[formName].resetFields();
        },
        // 获取验证码图片
        async getCaptcha() {
            await this.$http.get('/captcha')
                .then(res => {
                    this.captcha = res.data
                })
        }
    },
    mounted() {
        this.getCaptcha();
    }
}
</script>
<style>
.con {
    height: 700px;
    background: url(../assets/1.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: flex-end;
}

.login {
    width: 350px;
    background-color: white;
    margin: 150px auto;
    border-radius: 15px;
}
</style>